<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用bootstrap绘制form表单</title>
<!-- Bootstrap core CSS -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet">
<!-- bootstrap-datepicker-1.9.0-dist -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css"
	rel="stylesheet">

<!-- Bootstrap core JavaScript-->
<!-- Placed at the end of the document so the pages load faster -->
<!--import jquery before bootstrap javascript-->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>




<script type="text/javascript">
	// 给日期输入框添加事件处理
	// dom加载完成之后就会自动执行的代码
	$(function() {
		

		// 使用jquery的click方法给提交按钮绑定一个提交事件

		$("#btnSubmit").click(function() {
			///////////////////////ajax数据保存/////////////////////////////////////
			/*
			ajax进行文件上传时，就不能直接使用 $("#form1").serialize() 方法提交表单数据了
			而需要使用 formData对象进行提交表单数据，是浏览器内置的一个专门用户存储form表单的对象，可以存储文件流对象
			总之，formData是ajax引擎对象XMLHttpRequest用于提交异步的二进制文件流对象的
			*/
			// 创建一个用于提交文件流对象的formdata
			var fromData = new FormData($("#form1")[0]); // 注意  formdata是dom对象，而不是jquery对象
			//console.info(fromData);
			// 如果需要添加参数，需要采用 append("key",value); 一般key是form表单控件的name属性值  value控件的值
			// 也可以采用类似构造参数的方式初始化formData对象；
			$.ajax({
				// 请求类型
			   type: "POST",
				// 请求的url，和form的action属性值一样
			   url: "${pageContext.servletContext.contextPath}/MUserInfoAjaxSavingControl",
				// 发送的表单数据，按照如下格式提供即可："name=John&location=Boston"
			   //data:  $("#form1").serialize(), // 序列化表单参数，获取一个序列化的字符串，用于ajax请求，必须在form中才可以使用
			   data:fromData,
			   // response响应的数据类型，默认是文本类型，可以指定为 xml、html、json等类型
			   
			   // 进行文件上传时，还需要设定两个属性的值
			   // 不去处理发送的数据  
			   processData : false,   
			   // 不去设置Content-Type请求头  
			   contentType : false, 			   
			   
			   //dataType:"json",
			   // 回调函数
			   success: function(data, textStatus, jqXHR){

			     //console.info("回调结果：");
			     //console.info(data);
			     // 进行dom操作，局部修改浏览器的显示数据，进行局部刷新数据
				 if(data == "ok"){
					 //console.info("hhhhh");					 					 
					 alert("保存成功!");
					 $(location).attr('href', '${pageContext.servletContext.contextPath}/JumpU?pg=WEB-INF/pages/muserinfoajax/MUserInfoAjaxAdd.jsp');
					 
				 }else{
					 alert("保存失败!");
				 }
			   }

			});
			////////////////////////////////////////////////////////////

		});

	});
</script>
<style type="text/css" >
 $().ready(function() {
  var validate1 = $("#form1").validate({
                rules: {
                muser_name:{
                    	required : true,
                    	
                    },
                    },
                    messages: {
                    muser_name: {
                    	required:"用户名不能为空",
                    	remote:"用户名已经被注册！"
                    }, 
                    },

</style>

<style>
#maindiv {
	width: 80%;
	padding-top: 10px;
}
</style>
</head>
<body>
	<div id="maindiv">
		<!--  form表单中enctype属性可以用来控制对表单数据的发送前的如何进行编码，enctype有三种，分别为：
 multipart/form-data不对字符编码，用于发送二进制的文件，其他两种类型不能用于发送文件；
 text/plain用于发送纯文本内容，空格转换为 "+" 加号，不对特殊字符进行编码，一般用于email之类的；
 application/x-www-form-urlencoded，在发送前会编码所有字符，即在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，"+"加号转换为空格，特殊符号转换为 ASCII HEX 值）。
 其中application/x-www-form-urlencoded为默认类型。 
 -->
		<form class="form-horizontal" id="form1" enctype="multipart/form-data">
			<div class="form-group">
				<label class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" id="txtUserName"
						name="muser_name" placeholder="请输入用户名">
				</div>

				<label class="col-sm-2 control-label">密码</label>
				<div class="col-sm-4">
					<input type="password" class="form-control" id="txtUserPsw"
						name="muser_password" placeholder="请输入密码">
				</div>
			</div>
			
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-2">
					<button type="button" id="btnSubmit" class="btn btn-default">保存</button>
				</div>
				<div class="col-sm-offset-4 col-sm-2">
					<button type="reset" class="btn btn-default">重置</button>
				</div>
			</div>
		</form>
	</div>
</body>
</html>